<template>
	<view class="warp">
		<view class="list">
			<view class="list_item" v-for="(item,index) in deptlist" :key="index">
				<view class="i_left">
					<span>{{item.nameRemark}}</span>
					<span style="margin-left: 40rpx;color: #cecece;">{{item.userPhone}}</span>
				</view>
				<view class="i_right" style="display: flex;">
					<uni-icons type="back" size="22" v-if="!item.deleshow" @click="changeshow(index,item)"></uni-icons>
					<uni-icons type="forward" size="22" v-if="item.deleshow" @click="changeshow(index,item)"></uni-icons>
					<view @click="oppopup(item)" class="" style=" font-size: 24rpx;margin-left: 25rpx; border: 2rpx solid #cecece;padding: 2rpx 8rpx;border-radius:14rpx;background-color: #f2f2f2;color: #cecece;" v-if="item.deleshow">
						删除
					</view>
				</view>
			</view>
			<view style="text-align: center;" class="" v-if="deptlist.length==0">
				<image  src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/clear.png" mode="widthFix"></image>
			     <view class="" style="color: #a3a3a3;">
			     	暂无数据
			     </view>
			</view>
		</view>
		<view class="btn_butom" v-if="isshop">
			<view class="" @click="addcustomer">
				新增员工
			</view>
		</view>
		<view class="" style="padding-bottom: 200%;">
			
		</view>
		<uni-popup ref="popup" type="center"   background-color="#fff">
			<view class="" style="background-color: #fff;border-radius: 10rpx;">
				
				 <view class="title">
				添加员工
				 </view>
				<view class="form">
					<view class="" style="display: flex;align-items: center;">
					 <span style="margin-right: 15rpx;">姓名:</span>
						<input v-model="queryform.nameRemark" type="text" placeholder="请输入员工姓名"></input>
					</view>
					<view class="" style="margin-top: 40rpx;display: flex;align-items: center;">
						<span style="margin-right: 15rpx;">电话:</span>
						<input v-model="queryform.phone" type="text" placeholder="请输入员工电话"></input>
					</view>
					 
				</view>
				<view class="button">
					<view class="left" @click="cancel">
					取消
					</view>
					<view class="right" @click="submit">
						确定
				</view>
				</view>
				</view>
		</uni-popup>
		<uni-popup ref="popdelete" type="dialog">
			<uni-popup-dialog :before-close="true" type="input" :title="$L('提示')" :content="$L('是否确认删除')" :duration="2000"
				@confirm="confirmLogins" @close="closefn">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {
			mapState,
			mapMutations
		} from 'vuex'
	export default {
		components:{
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
			
		},
		data() {
			return {
				deptlist:[],
				show:false,
				queryform:{
					phone:'',
					nameRemark:''
				},
				isshop:false,
				deleshow:false,
				iteminfo:{}
			};
		},
		onLoad() {
			this.getidshop()
			this.getlist()
		},
		computed: {
					...mapState(['hasLogin', 'userInfo', 'userCenterData']),
					},
		methods:{
			// 
			changeshow(index,val){
				if(val.deleshow){
					val.deleshow=false
				}else{
					val.deleshow=true
				}
				
				this.$set(this.deptlist,index,val)//更改数组（数组，索引，新值）
				
				
			},
			// 校验是否是商户
			getidshop(){
				this.$request({
					url:'v3/seller/front/vendor/list',
					method:"GET",
					data:{vendorMobile:this.userCenterData.memberMobile}
				}).then(res=>{
					if(res.data.length!=0){
						this.isshop=true
					}else{
						uni.showToast({
							title:'升级商户可操作',
							icon:'none'
						})
					}
				})
				
			},
			addcustomer(){
					this.$refs.popup.open()
			},
			
			// 获取组织人员
			getlist(){
				console.log('56',this.userCenterData);
				this.$request({
					url:'v3/task/front/appUserStore/page',
					method:"GET",
					data:{
						storeId:this.userCenterData.memberId
					}
				}).then(res=>{
					this.deptlist=res.data.list
					this.deptlist.forEach(item=>{
						item.deleshow=false
					})
				})
			},
			submit(){
				// 查询员工
				this.$request({
					url:'v3/member/admin/member/list',
					method:"GET",
					data:{
						memberMobile:this.queryform.phone
					}
				}).then(res=>{
					console.log(res);
					if(res.data.list.length!=0){
						if(this.queryform.phone.length==0 && this.queryform.nameRemark.length==0){
							uni.showToast({
								title:'请填写完整信息',
								icon:'none'
							})
						}else{
						// 添加员工
						this.$request({
							url:'v3/task/front/appUserStore',
							method:"POST",
							header:{
							  'Content-Type': 'application/json'
							},
							data:{
								storeId:this.userCenterData.memberId,
								userId:res.data.list[0].memberId,
								nameRemark:this.queryform.nameRemark
							}
						}).then(ress=>{
							if(ress.state==200){
								this.queryform={
									phone:'',
									nameRemark:''
								}
								this.$refs.popup.close()
								// 刷新列表
								this.getlist()
							}
						})	
						}
						
					}else{
						uni.showToast({
							title:'添加失败'
						})
						this.$refs.popup.close()
					}
				})
			},
			oppopup(val){
				this.$refs.popdelete.open()
				this.iteminfo=val
			},
			// 关闭聊天
			closefn(){
				this.$refs.popdelete.close()
			},
			// 确认删除
			confirmLogins(){
				if(this.isshop){
					let arr=[]
					arr.push(Number(this.iteminfo.id))
					this.$request({
						url:'v3/task/front/appUserStore/delete/'+this.iteminfo.id,
					    method:'GET',
						// header:{
						//   'Content-Type': 'application/json'
						// },
						// data:JSON.stringify(arr)
						
					}).then(res=>{
						if(res.state==200){
							uni.showToast({
							 icon:'none',
							  title:'删除成功'
							})
							this.$refs.popdelete.close()
							this.getlist()
							
						}
					  
					})
				}else{
					uni.showToast({
					 icon:'none',
					  title:'当前不可操作'
					})
				}
			},
			
			cancel(){
			this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
	}
.warp{
	overflow: hidden;
	background-color: #f5f5f5;
	.list{
		margin-top: 10rpx;
		.list_item{
			margin-bottom: 10rpx;
			padding: 30rpx 30rpx ;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
		}
	}
	.btn_butom{
		position: fixed;
		bottom: 30rpx;
		left: 34%;
		padding: 15rpx 60rpx;
		color: #fff;
		background-color: #feb858;
		border-radius: 50rpx;
		
	}
	.title{
		padding-top: 10rpx;
		text-align: center;
		font-size: 32rpx;
	}
	.form{
		padding: 80rpx;
	}
	.button{
		width: 100%;
		height: 80rpx;
		border-top: 2rpx solid #cecece;
		display: flex;
		.left{
			width: 50%;
			height: 80rpx;
			border-right: 2rpx solid #cecece;
			text-align: center;
			line-height: 80rpx;
		}
		.right{
			width: 50%;
			text-align: center;
			line-height: 80rpx;
		}
		
	}
}
</style>
